<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.4.6 (461470)"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2020-08-19 03:49:46 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2021-02-27 09:58:03 +0000"/><meta name="content-class" content="yinxiang.markdown"/><title>day02：VUE - 选项 - 钩子函数</title></head><body><div style="font-size: 14px; margin: 0; padding: 0; width: 100%;"><div style="line-height: 160%; box-sizing: content-box;"><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">一、事件
</a><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">1. 事件绑定
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">2. 事件对象
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">3. 事件修饰符
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">4. 按键修饰符
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">5. 系统修饰键
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">6. 表单修饰
</a></li></ul></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">二、计算属性 和 侦听器
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">三、生命周期 - 钩子函数
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">四、数据请求
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">五、作业
</a></li></ul></div><h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000; margin-top: 14px;">一、事件</h1>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">1. 事件绑定</h3>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">行内事件
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">可以直接在事件属性中执行js语句，</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">不推荐使用，因为在更多情况下，事件的处理可能会更复杂</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">button</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-on:click</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"msg = 'hello ' + msg"</span>&gt;</span>
            点击
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">button</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span>&gt;</span>{{msg}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data:{
            msg:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"vue"</span>
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">事件处理方法
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在<code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">methods</code>选项内，定义事件触发方法</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在事件中调用方法名</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">无法传参</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">button</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-on:click</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"say"</span>&gt;</span>
            点击
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">button</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span>&gt;</span>{{msg}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data:{
            msg:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"vue"</span>
        },
        methods: {
            say(){
                <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.msg = <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"你好 "</span> + <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.msg;
            }
        },
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">行内调用事件处理方法
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在<code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">methods</code>选项内，定义事件触发方法</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在事件中执行方法</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">可以传参</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">button</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-on:click</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"say('萨瓦迪卡')"</span>&gt;</span>
            点击
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">button</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span>&gt;</span>{{msg}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data:{
            msg:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"vue"</span>
        },
        methods: {
            say(m){
                <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.msg = m + <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.msg;
            }
        },
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
</li>
</ol>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">2. 事件对象</h3>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">事件处理方法
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在事件处理方法内，接收event参数</li>
</ul>
</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">button</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-on:click</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"fn"</span>&gt;</span>
            点击
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">button</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">el</span>:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">methods</span>: {
            fn(event){
                <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(event);
            }
        },
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">行内调用事件
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">需要主动将<code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">$event</code>传参</li>
</ul>
</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">button</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-on:click</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"fn($event)"</span>&gt;</span>
            点击
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">button</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">el</span>:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">methods</span>: {
            fn(event){
                <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(event);
            }
        },
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">3. 事件修饰符</h3>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">事件方法，为了更方便的处理数据逻辑，而不是DOM细节，vue提供了事件修饰符：
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.stop：阻止事件冒泡</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.prevent：阻止默认事件</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.capture：使用事件捕获</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.self：只有event.target是当前元素时才会触发</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.once：只会触发一次事件</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.passive：立即触发滚动事件，不会等待onscroll结束</li>
</ul>
</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 阻止单击事件继续传播 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">a</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-on:click.stop</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"doThis"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">a</span>&gt;</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 提交事件不再重载页面 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">form</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-on:submit.prevent</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"onSubmit"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">form</span>&gt;</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 修饰符可以串联 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">a</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-on:click.stop.prevent</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"doThat"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">a</span>&gt;</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 只有修饰符 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">form</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-on:submit.prevent</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">form</span>&gt;</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 添加事件监听器时使用事件捕获模式 --&gt;</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-on:click.capture</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"doThis"</span>&gt;</span>...<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 只当在 event.target 是当前元素自身时触发处理函数 --&gt;</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 即事件不是从内部元素触发的 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-on:click.self</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"doThat"</span>&gt;</span>...<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 点击事件将只会触发一次 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">a</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-on:click.once</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"doThis"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">a</span>&gt;</span>

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --&gt;</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 而不会等待 `onScroll` 完成  --&gt;</span>
<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 这其中包含 `event.preventDefault()` 的情况 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-on:scroll.passive</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"onScroll"</span>&gt;</span>...<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
</code></pre>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">4. 按键修饰符</h3>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">监听键盘事件时，方便查找具体的键
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.enter：查找回车键</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.tab：查找tab键</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.delete (捕获“删除”和“退格”键)</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.esc：查找esc键</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.space：查找空格键</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.up：查找上键</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.down：查找下键</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.lefe：查找左键</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.right：查找右键</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 可以使用 `v-on:keyup.f1`</span>
Vue.config.keyCodes.f1 = <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">112</span>
</code></pre>
</li>
</ul>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">5. 系统修饰键</h3>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">用来做组合键的系统按键</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.ctrl</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.alt</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.shift</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.meta</li>
</ul>
<blockquote style="line-height: 160%; box-sizing: content-box; margin: 15px 0; border-left: 4px solid #ddd; padding: 0 15px; color: #777;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin-top: 0; margin-bottom: 0; margin: 0;">注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。</p>
</blockquote>
</li>
</ul>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">6. 表单修饰</h3>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.lazy
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。添加 lazy 修饰符，从而转为在 change 事件之后进行同步：</li>
</ul>
</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 在“change”时而非“input”时更新 --&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model.lazy</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"msg"</span>&gt;</span>
</code></pre>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.number
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">即使在 type="number" 时，HTML 输入元素的值也会返回字符串。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：</li>
</ul>
</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model.number</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"age"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"number"</span>&gt;</span>
</code></pre>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">.trim
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：</li>
</ul>
</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model.trim</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"msg"</span>&gt;</span>
</code></pre>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">二、计算属性 和 侦听器</h1>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">对于任何复杂逻辑，都应当使用计算属性</li>
</ul>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">计算属性其实就是针对data中的选项，通过某种逻辑得到的新的数据</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">一般的书写形式为一个函数，返回一个值</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">使用计算属性时，和data中的数据使用方式保持一致</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">计算属性在vue实例的computed选项中</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
            {{msg}} --- {{ msg.split("").reverse().join("") }}
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
            <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 使用计算属性时，和data中的数据使用方式保持一致 --&gt;</span>
            {{msg}} --- {{ reverseMsg }}
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data:{
            msg:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"hello vue"</span>
        },
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 计算属性在vue实例的computed选项中</span>
        computed: {
            <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 一般的书写形式为一个函数，返回一个值</span>
            reverseMsg(){
                <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.msg.split(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>).reverse().join(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>);
            }
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">计算属性 VS 方法</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">同等条件下，计算属性具有依赖性，要优于方法</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">计算属性只有在原始数据发生改变时才会重新执行</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">方法会在每次使用时都会重新执行</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
            {{msg}} --- {{ reverseMsgFn() }} --- {{ reverseMsgFn() }}
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
            {{msg}} --- {{ reverseMsg }} --- {{ reverseMsg }}
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">el</span>:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">data</span>:{
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">msg</span>:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"hello vue"</span>
        },
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">computed</span>: {
            reverseMsg(){
                <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"computed"</span>);
                <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.msg.split(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>).reverse().join(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>);
            }
        },
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">methods</span>: {
            reverseMsgFn(){
                <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"methods"</span>);
                <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.msg.split(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>).reverse().join(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>);
            }
        },
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><img src="day02%EF%BC%9AVUE%20-%20%E9%80%89%E9%A1%B9%20-%20%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0.resources/F760DF95-8A8E-4402-8845-F547DB08C732.png" height="684" width="1444"/></p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">侦听器</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">当数据发生变化，执行异步或开销较大的操作时，可以使用侦听器</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">侦听器会在侦听数据发生变化时执行</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"text"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"firstName"</span>&gt;</span> + <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"text"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"lastName"</span>&gt;</span> = {{fullName}}
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data:{
            firstName:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>,
            lastName:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>,
            fullName:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>
        },
        watch: {
            firstName( newVal, oldVal ){
                <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.fullName = newVal + <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.lastName;
            },
            lastName( newVal, oldVal ){
                <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.fullName = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.firstName + newVal;
            }
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">计算属性 PK 侦听器</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">同等条件下，计算属性优于侦听器</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">计算属性可以更方便的解决某些问题</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"text"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"firstName"</span>&gt;</span> + <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"text"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"lastName"</span>&gt;</span> = {{fullName}}
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">br</span> /&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"text"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"firstName2"</span>&gt;</span> + <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"text"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"lastName2"</span>&gt;</span> = {{fullName2}}
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data:{
            firstName:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>,
            lastName:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>,
            fullName:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>,
            firstName2:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>,
            lastName2:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>,
        },
        watch: {
            firstName( newVal, oldVal ){
                <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.fullName = newVal + <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.lastName;
            },
            lastName( newVal, oldVal ){
                <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.fullName = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.firstName + newVal;
            }
        },
        computed: {
            fullName2(){
                <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.firstName2 + <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.lastName2;
            }
        },
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">计算属性的setter</p>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">三、生命周期 - 钩子函数</h1>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">每个 Vue 实例在被创建时都要经过一系列的初始化过程，这个过程中会运行一些叫做生命周期钩子的函数，让用户可以在不同阶段添加自己的代码。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。<br/>
<img src="day02%EF%BC%9AVUE%20-%20%E9%80%89%E9%A1%B9%20-%20%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0.resources/B0241700-EC35-4645-9474-E000FA4FC16C.png" height="3039" width="1200"/></li>
</ul>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">声明周期钩子函数的分类<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">el</span>:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
    beforeCreate() {
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">/*备孕*/</span>
        <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"实例创建之前"</span>)
    },
    created() {
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">/*怀上了*/</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 数据请求</span>
        <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"实例创建之后"</span>)
    },
    beforeMount() {
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">/*快生了*/</span>
        <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"挂载到页面之前"</span>)
    },
    mounted() {
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">/*生了*/</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 数据请求，DOM操作，监听滚动事件...</span>
        <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"挂载到页面之后"</span>)
    },
    beforeUpdate() {
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">/*快长大了*/</span>
        <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"数据更新之前"</span>)
    },
    updated() {
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">/*长大了*/</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// DOM操作，实例化的操作...</span>
        <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"数据更新之后"</span>)
    },
    beforeDestroy() {
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">/*要挂了*/</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 取消数据订阅</span>
        <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"实例销毁之前"</span>)
    },
    destroyed() {
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">/*挂了*/</span>
        <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"实例销毁之后"</span>)
    }
})
</code></pre>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">四、数据请求</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">fetch</a></p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">fetch不是ajax的进一步封装，而是原生js。Fetch函数就是原生js，没有使用XMLHttpRequest对象。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">fetch会返回一个Promise对象，这个Promise对象只是一个HTTP的响应，并不是一个JSON</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">如果要进行一个json请求，我们需要借助json方法，手动返回一个json，才能进行下一步处理</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> url = <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"http://localhost:3000/pro"</span>;
fetch(url).then(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">res</span>) </span>{
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> response.json();
}).then(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span>(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">data</span>) </span>{
    <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(data);
});
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">axios</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><a href="http://www.axios-js.com/" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">Axios</a> 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">需要引入第三方文件 axios.js
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">&lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;</code></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">使用方式类似于jQuery的ajax
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><a href="http://www.axios-js.com/zh-cn/docs/" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">axios使用文档</a></li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">let</span> url = <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"http://localhost:3000/pro"</span>;
axios.get(url).then(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> (<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">res</span>) </span>{
    <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(res);
}).catch(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> (<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">err</span>) </span>{
    <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(err);
});
</code></pre>
</li>
</ul>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">五、作业</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">TodoList的实现：增删改查</li>
</ol>
</div><center style="display:none !important;visibility:collapse !important;height:0 !important;white-space:nowrap;width:100%;overflow:hidden">%5Btoc%5D%0A%23%20%E4%B8%80%E3%80%81%E4%BA%8B%E4%BB%B6%0A%23%23%23%201.%20%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%0A1.%20%E8%A1%8C%E5%86%85%E4%BA%8B%E4%BB%B6%0A%20%20%20%20-%20%E5%8F%AF%E4%BB%A5%E7%9B%B4%E6%8E%A5%E5%9C%A8%E4%BA%8B%E4%BB%B6%E5%B1%9E%E6%80%A7%E4%B8%AD%E6%89%A7%E8%A1%8Cjs%E8%AF%AD%E5%8F%A5%EF%BC%8C%0A%20%20%20%20-%20%E4%B8%8D%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8%EF%BC%8C%E5%9B%A0%E4%B8%BA%E5%9C%A8%E6%9B%B4%E5%A4%9A%E6%83%85%E5%86%B5%E4%B8%8B%EF%BC%8C%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86%E5%8F%AF%E8%83%BD%E4%BC%9A%E6%9B%B4%E5%A4%8D%E6%9D%82%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Cbody%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20v-on%3Aclick%3D%22msg%20%3D%20'hello%20'%20%2B%20msg%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%E7%82%B9%E5%87%BB%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3E%7B%7Bmsg%7D%7D%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fbody%3E%0A%20%20%20%20%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%20%20%20%20%3Cscript%3E%0A%20%20%20%20%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%22vue%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%3C%2Fscript%3E%0A%20%20%20%20%60%60%60%0A2.%20%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E6%96%B9%E6%B3%95%0A%20%20%20%20-%20%E5%9C%A8%60methods%60%E9%80%89%E9%A1%B9%E5%86%85%EF%BC%8C%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6%E8%A7%A6%E5%8F%91%E6%96%B9%E6%B3%95%0A%20%20%20%20-%20%E5%9C%A8%E4%BA%8B%E4%BB%B6%E4%B8%AD%E8%B0%83%E7%94%A8%E6%96%B9%E6%B3%95%E5%90%8D%0A%20%20%20%20-%20%E6%97%A0%E6%B3%95%E4%BC%A0%E5%8F%82%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Cbody%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20v-on%3Aclick%3D%22say%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%E7%82%B9%E5%87%BB%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3E%7B%7Bmsg%7D%7D%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fbody%3E%0A%20%20%20%20%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%20%20%20%20%3Cscript%3E%0A%20%20%20%20%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%22vue%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20say()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.msg%20%3D%20%22%E4%BD%A0%E5%A5%BD%20%22%20%2B%20this.msg%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%3C%2Fscript%3E%0A%20%20%20%20%60%60%60%0A3.%20%E8%A1%8C%E5%86%85%E8%B0%83%E7%94%A8%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E6%96%B9%E6%B3%95%0A%20%20%20%20-%20%E5%9C%A8%60methods%60%E9%80%89%E9%A1%B9%E5%86%85%EF%BC%8C%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6%E8%A7%A6%E5%8F%91%E6%96%B9%E6%B3%95%0A%20%20%20%20-%20%E5%9C%A8%E4%BA%8B%E4%BB%B6%E4%B8%AD%E6%89%A7%E8%A1%8C%E6%96%B9%E6%B3%95%0A%20%20%20%20-%20%E5%8F%AF%E4%BB%A5%E4%BC%A0%E5%8F%82%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Cbody%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20v-on%3Aclick%3D%22say('%E8%90%A8%E7%93%A6%E8%BF%AA%E5%8D%A1')%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%E7%82%B9%E5%87%BB%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3E%7B%7Bmsg%7D%7D%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fbody%3E%0A%20%20%20%20%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%20%20%20%20%3Cscript%3E%0A%20%20%20%20%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%22vue%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20say(m)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.msg%20%3D%20m%20%2B%20this.msg%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%3C%2Fscript%3E%0A%20%20%20%20%60%60%60%0A%0A%23%23%23%202.%20%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%0A-%20%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E6%96%B9%E6%B3%95%0A%20%20%20%20-%20%E5%9C%A8%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E6%96%B9%E6%B3%95%E5%86%85%EF%BC%8C%E6%8E%A5%E6%94%B6event%E5%8F%82%E6%95%B0%0A%60%60%60html%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20v-on%3Aclick%3D%22fn%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%E7%82%B9%E5%87%BB%0A%20%20%20%20%20%20%20%20%3C%2Fbutton%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fn(event)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log(event)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A-%20%E8%A1%8C%E5%86%85%E8%B0%83%E7%94%A8%E4%BA%8B%E4%BB%B6%0A%20%20%20%20-%20%E9%9C%80%E8%A6%81%E4%B8%BB%E5%8A%A8%E5%B0%86%60%24event%60%E4%BC%A0%E5%8F%82%0A%60%60%60html%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20v-on%3Aclick%3D%22fn(%24event)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%E7%82%B9%E5%87%BB%0A%20%20%20%20%20%20%20%20%3C%2Fbutton%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fn(event)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log(event)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A%0A%23%23%23%203.%20%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6%0A-%20%E4%BA%8B%E4%BB%B6%E6%96%B9%E6%B3%95%EF%BC%8C%E4%B8%BA%E4%BA%86%E6%9B%B4%E6%96%B9%E4%BE%BF%E7%9A%84%E5%A4%84%E7%90%86%E6%95%B0%E6%8D%AE%E9%80%BB%E8%BE%91%EF%BC%8C%E8%80%8C%E4%B8%8D%E6%98%AFDOM%E7%BB%86%E8%8A%82%EF%BC%8Cvue%E6%8F%90%E4%BE%9B%E4%BA%86%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6%EF%BC%9A%0A%20%20%20%20-%20.stop%EF%BC%9A%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%0A%20%20%20%20-%20.prevent%EF%BC%9A%E9%98%BB%E6%AD%A2%E9%BB%98%E8%AE%A4%E4%BA%8B%E4%BB%B6%0A%20%20%20%20-%20.capture%EF%BC%9A%E4%BD%BF%E7%94%A8%E4%BA%8B%E4%BB%B6%E6%8D%95%E8%8E%B7%0A%20%20%20%20-%20.self%EF%BC%9A%E5%8F%AA%E6%9C%89event.target%E6%98%AF%E5%BD%93%E5%89%8D%E5%85%83%E7%B4%A0%E6%97%B6%E6%89%8D%E4%BC%9A%E8%A7%A6%E5%8F%91%0A%20%20%20%20-%20.once%EF%BC%9A%E5%8F%AA%E4%BC%9A%E8%A7%A6%E5%8F%91%E4%B8%80%E6%AC%A1%E4%BA%8B%E4%BB%B6%0A%20%20%20%20-%20.passive%EF%BC%9A%E7%AB%8B%E5%8D%B3%E8%A7%A6%E5%8F%91%E6%BB%9A%E5%8A%A8%E4%BA%8B%E4%BB%B6%EF%BC%8C%E4%B8%8D%E4%BC%9A%E7%AD%89%E5%BE%85onscroll%E7%BB%93%E6%9D%9F%0A%60%60%60html%0A%3C!--%20%E9%98%BB%E6%AD%A2%E5%8D%95%E5%87%BB%E4%BA%8B%E4%BB%B6%E7%BB%A7%E7%BB%AD%E4%BC%A0%E6%92%AD%20--%3E%0A%3Ca%20v-on%3Aclick.stop%3D%22doThis%22%3E%3C%2Fa%3E%0A%0A%3C!--%20%E6%8F%90%E4%BA%A4%E4%BA%8B%E4%BB%B6%E4%B8%8D%E5%86%8D%E9%87%8D%E8%BD%BD%E9%A1%B5%E9%9D%A2%20--%3E%0A%3Cform%20v-on%3Asubmit.prevent%3D%22onSubmit%22%3E%3C%2Fform%3E%0A%0A%3C!--%20%E4%BF%AE%E9%A5%B0%E7%AC%A6%E5%8F%AF%E4%BB%A5%E4%B8%B2%E8%81%94%20--%3E%0A%3Ca%20v-on%3Aclick.stop.prevent%3D%22doThat%22%3E%3C%2Fa%3E%0A%0A%3C!--%20%E5%8F%AA%E6%9C%89%E4%BF%AE%E9%A5%B0%E7%AC%A6%20--%3E%0A%3Cform%20v-on%3Asubmit.prevent%3E%3C%2Fform%3E%0A%0A%3C!--%20%E6%B7%BB%E5%8A%A0%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC%E5%99%A8%E6%97%B6%E4%BD%BF%E7%94%A8%E4%BA%8B%E4%BB%B6%E6%8D%95%E8%8E%B7%E6%A8%A1%E5%BC%8F%20--%3E%0A%3C!--%20%E5%8D%B3%E5%86%85%E9%83%A8%E5%85%83%E7%B4%A0%E8%A7%A6%E5%8F%91%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%85%88%E5%9C%A8%E6%AD%A4%E5%A4%84%E7%90%86%EF%BC%8C%E7%84%B6%E5%90%8E%E6%89%8D%E4%BA%A4%E7%94%B1%E5%86%85%E9%83%A8%E5%85%83%E7%B4%A0%E8%BF%9B%E8%A1%8C%E5%A4%84%E7%90%86%20--%3E%0A%3Cdiv%20v-on%3Aclick.capture%3D%22doThis%22%3E...%3C%2Fdiv%3E%0A%0A%3C!--%20%E5%8F%AA%E5%BD%93%E5%9C%A8%20event.target%20%E6%98%AF%E5%BD%93%E5%89%8D%E5%85%83%E7%B4%A0%E8%87%AA%E8%BA%AB%E6%97%B6%E8%A7%A6%E5%8F%91%E5%A4%84%E7%90%86%E5%87%BD%E6%95%B0%20--%3E%0A%3C!--%20%E5%8D%B3%E4%BA%8B%E4%BB%B6%E4%B8%8D%E6%98%AF%E4%BB%8E%E5%86%85%E9%83%A8%E5%85%83%E7%B4%A0%E8%A7%A6%E5%8F%91%E7%9A%84%20--%3E%0A%3Cdiv%20v-on%3Aclick.self%3D%22doThat%22%3E...%3C%2Fdiv%3E%0A%0A%3C!--%20%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6%E5%B0%86%E5%8F%AA%E4%BC%9A%E8%A7%A6%E5%8F%91%E4%B8%80%E6%AC%A1%20--%3E%0A%3Ca%20v-on%3Aclick.once%3D%22doThis%22%3E%3C%2Fa%3E%0A%0A%3C!--%20%E6%BB%9A%E5%8A%A8%E4%BA%8B%E4%BB%B6%E7%9A%84%E9%BB%98%E8%AE%A4%E8%A1%8C%E4%B8%BA%20(%E5%8D%B3%E6%BB%9A%E5%8A%A8%E8%A1%8C%E4%B8%BA)%20%E5%B0%86%E4%BC%9A%E7%AB%8B%E5%8D%B3%E8%A7%A6%E5%8F%91%20--%3E%0A%3C!--%20%E8%80%8C%E4%B8%8D%E4%BC%9A%E7%AD%89%E5%BE%85%20%60onScroll%60%20%E5%AE%8C%E6%88%90%20%20--%3E%0A%3C!--%20%E8%BF%99%E5%85%B6%E4%B8%AD%E5%8C%85%E5%90%AB%20%60event.preventDefault()%60%20%E7%9A%84%E6%83%85%E5%86%B5%20--%3E%0A%3Cdiv%20v-on%3Ascroll.passive%3D%22onScroll%22%3E...%3C%2Fdiv%3E%0A%60%60%60%0A%0A%23%23%23%204.%20%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6%0A-%20%E7%9B%91%E5%90%AC%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6%E6%97%B6%EF%BC%8C%E6%96%B9%E4%BE%BF%E6%9F%A5%E6%89%BE%E5%85%B7%E4%BD%93%E7%9A%84%E9%94%AE%0A%20%20%20%20-%20.enter%EF%BC%9A%E6%9F%A5%E6%89%BE%E5%9B%9E%E8%BD%A6%E9%94%AE%0A%20%20%20%20-%20.tab%EF%BC%9A%E6%9F%A5%E6%89%BEtab%E9%94%AE%0A%20%20%20%20-%20.delete%20(%E6%8D%95%E8%8E%B7%E2%80%9C%E5%88%A0%E9%99%A4%E2%80%9D%E5%92%8C%E2%80%9C%E9%80%80%E6%A0%BC%E2%80%9D%E9%94%AE)%0A%20%20%20%20-%20.esc%EF%BC%9A%E6%9F%A5%E6%89%BEesc%E9%94%AE%0A%20%20%20%20-%20.space%EF%BC%9A%E6%9F%A5%E6%89%BE%E7%A9%BA%E6%A0%BC%E9%94%AE%0A%20%20%20%20-%20.up%EF%BC%9A%E6%9F%A5%E6%89%BE%E4%B8%8A%E9%94%AE%0A%20%20%20%20-%20.down%EF%BC%9A%E6%9F%A5%E6%89%BE%E4%B8%8B%E9%94%AE%0A%20%20%20%20-%20.lefe%EF%BC%9A%E6%9F%A5%E6%89%BE%E5%B7%A6%E9%94%AE%0A%20%20%20%20-%20.right%EF%BC%9A%E6%9F%A5%E6%89%BE%E5%8F%B3%E9%94%AE%0A-%20%E8%BF%98%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%E5%85%A8%E5%B1%80%20config.keyCodes%20%E5%AF%B9%E8%B1%A1%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6%E5%88%AB%E5%90%8D%EF%BC%9A%0A%20%20%20%20%60%60%60js%0A%20%20%20%20%2F%2F%20%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%20%60v-on%3Akeyup.f1%60%0A%20%20%20%20Vue.config.keyCodes.f1%20%3D%20112%0A%20%20%20%20%60%60%60%0A%0A%23%23%23%205.%20%E7%B3%BB%E7%BB%9F%E4%BF%AE%E9%A5%B0%E9%94%AE%0A-%20%E7%94%A8%E6%9D%A5%E5%81%9A%E7%BB%84%E5%90%88%E9%94%AE%E7%9A%84%E7%B3%BB%E7%BB%9F%E6%8C%89%E9%94%AE%0A%20%20%20%20-%20.ctrl%0A%20%20%20%20-%20.alt%0A%20%20%20%20-%20.shift%0A%20%20%20%20-%20.meta%0A%20%20%20%20%0A%20%20%20%20%3E%20%E6%B3%A8%E6%84%8F%EF%BC%9A%E5%9C%A8%20Mac%20%E7%B3%BB%E7%BB%9F%E9%94%AE%E7%9B%98%E4%B8%8A%EF%BC%8Cmeta%20%E5%AF%B9%E5%BA%94%20command%20%E9%94%AE%20(%E2%8C%98)%E3%80%82%E5%9C%A8%20Windows%20%E7%B3%BB%E7%BB%9F%E9%94%AE%E7%9B%98%20meta%20%E5%AF%B9%E5%BA%94%20Windows%20%E5%BE%BD%E6%A0%87%E9%94%AE%20(%E2%8A%9E)%E3%80%82%E5%9C%A8%20Sun%20%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E9%94%AE%E7%9B%98%E4%B8%8A%EF%BC%8Cmeta%20%E5%AF%B9%E5%BA%94%E5%AE%9E%E5%BF%83%E5%AE%9D%E7%9F%B3%E9%94%AE%20(%E2%97%86)%E3%80%82%E5%9C%A8%E5%85%B6%E4%BB%96%E7%89%B9%E5%AE%9A%E9%94%AE%E7%9B%98%E4%B8%8A%EF%BC%8C%E5%B0%A4%E5%85%B6%E5%9C%A8%20MIT%20%E5%92%8C%20Lisp%20%E6%9C%BA%E5%99%A8%E7%9A%84%E9%94%AE%E7%9B%98%E3%80%81%E4%BB%A5%E5%8F%8A%E5%85%B6%E5%90%8E%E7%BB%A7%E4%BA%A7%E5%93%81%EF%BC%8C%E6%AF%94%E5%A6%82%20Knight%20%E9%94%AE%E7%9B%98%E3%80%81space-cadet%20%E9%94%AE%E7%9B%98%EF%BC%8Cmeta%20%E8%A2%AB%E6%A0%87%E8%AE%B0%E4%B8%BA%E2%80%9CMETA%E2%80%9D%E3%80%82%E5%9C%A8%20Symbolics%20%E9%94%AE%E7%9B%98%E4%B8%8A%EF%BC%8Cmeta%20%E8%A2%AB%E6%A0%87%E8%AE%B0%E4%B8%BA%E2%80%9CMETA%E2%80%9D%E6%88%96%E8%80%85%E2%80%9CMeta%E2%80%9D%E3%80%82%0A%20%20%20%20%0A%23%23%23%206.%20%E8%A1%A8%E5%8D%95%E4%BF%AE%E9%A5%B0%0A-%20.lazy%0A%20%20%20%20-%20%E5%9C%A8%E9%BB%98%E8%AE%A4%E6%83%85%E5%86%B5%E4%B8%8B%EF%BC%8Cv-model%20%E5%9C%A8%E6%AF%8F%E6%AC%A1%20input%20%E4%BA%8B%E4%BB%B6%E8%A7%A6%E5%8F%91%E5%90%8E%E5%B0%86%E8%BE%93%E5%85%A5%E6%A1%86%E7%9A%84%E5%80%BC%E4%B8%8E%E6%95%B0%E6%8D%AE%E8%BF%9B%E8%A1%8C%E5%90%8C%E6%AD%A5%E3%80%82%E6%B7%BB%E5%8A%A0%20lazy%20%E4%BF%AE%E9%A5%B0%E7%AC%A6%EF%BC%8C%E4%BB%8E%E8%80%8C%E8%BD%AC%E4%B8%BA%E5%9C%A8%20change%20%E4%BA%8B%E4%BB%B6%E4%B9%8B%E5%90%8E%E8%BF%9B%E8%A1%8C%E5%90%8C%E6%AD%A5%EF%BC%9A%0A%60%60%60html%0A%3C!--%20%E5%9C%A8%E2%80%9Cchange%E2%80%9D%E6%97%B6%E8%80%8C%E9%9D%9E%E2%80%9Cinput%E2%80%9D%E6%97%B6%E6%9B%B4%E6%96%B0%20--%3E%0A%3Cinput%20v-model.lazy%3D%22msg%22%3E%0A%60%60%60%0A-%20.number%0A%20%20%20%20-%20%E5%8D%B3%E4%BD%BF%E5%9C%A8%20type%3D%22number%22%20%E6%97%B6%EF%BC%8CHTML%20%E8%BE%93%E5%85%A5%E5%85%83%E7%B4%A0%E7%9A%84%E5%80%BC%E4%B9%9F%E4%BC%9A%E8%BF%94%E5%9B%9E%E5%AD%97%E7%AC%A6%E4%B8%B2%E3%80%82%0A%20%20%20%20-%20%E5%A6%82%E6%9E%9C%E6%83%B3%E8%87%AA%E5%8A%A8%E5%B0%86%E7%94%A8%E6%88%B7%E7%9A%84%E8%BE%93%E5%85%A5%E5%80%BC%E8%BD%AC%E4%B8%BA%E6%95%B0%E5%80%BC%E7%B1%BB%E5%9E%8B%EF%BC%8C%E5%8F%AF%E4%BB%A5%E7%BB%99%20v-model%20%E6%B7%BB%E5%8A%A0%20number%20%E4%BF%AE%E9%A5%B0%E7%AC%A6%EF%BC%9A%0A%60%60%60html%0A%3Cinput%20v-model.number%3D%22age%22%20type%3D%22number%22%3E%0A%60%60%60%0A%0A-%20.trim%0A%20%20%20%20-%20%E5%A6%82%E6%9E%9C%E8%A6%81%E8%87%AA%E5%8A%A8%E8%BF%87%E6%BB%A4%E7%94%A8%E6%88%B7%E8%BE%93%E5%85%A5%E7%9A%84%E9%A6%96%E5%B0%BE%E7%A9%BA%E7%99%BD%E5%AD%97%E7%AC%A6%EF%BC%8C%E5%8F%AF%E4%BB%A5%E7%BB%99%20v-model%20%E6%B7%BB%E5%8A%A0%20trim%20%E4%BF%AE%E9%A5%B0%E7%AC%A6%EF%BC%9A%0A%60%60%60html%0A%3Cinput%20v-model.trim%3D%22msg%22%3E%0A%60%60%60%0A%0A%0A%23%20%E4%BA%8C%E3%80%81%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%20%E5%92%8C%20%E4%BE%A6%E5%90%AC%E5%99%A8%0A-%20%E5%AF%B9%E4%BA%8E%E4%BB%BB%E4%BD%95%E5%A4%8D%E6%9D%82%E9%80%BB%E8%BE%91%EF%BC%8C%E9%83%BD%E5%BA%94%E5%BD%93%E4%BD%BF%E7%94%A8%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%0A%0A1.%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E5%85%B6%E5%AE%9E%E5%B0%B1%E6%98%AF%E9%92%88%E5%AF%B9data%E4%B8%AD%E7%9A%84%E9%80%89%E9%A1%B9%EF%BC%8C%E9%80%9A%E8%BF%87%E6%9F%90%E7%A7%8D%E9%80%BB%E8%BE%91%E5%BE%97%E5%88%B0%E7%9A%84%E6%96%B0%E7%9A%84%E6%95%B0%E6%8D%AE%0A%20%20%20%20-%20%E4%B8%80%E8%88%AC%E7%9A%84%E4%B9%A6%E5%86%99%E5%BD%A2%E5%BC%8F%E4%B8%BA%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%EF%BC%8C%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E5%80%BC%0A%20%20%20%20-%20%E4%BD%BF%E7%94%A8%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E6%97%B6%EF%BC%8C%E5%92%8Cdata%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F%E4%BF%9D%E6%8C%81%E4%B8%80%E8%87%B4%0A%20%20%20%20-%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E5%9C%A8vue%E5%AE%9E%E4%BE%8B%E7%9A%84computed%E9%80%89%E9%A1%B9%E4%B8%AD%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Cbody%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%7Bmsg%7D%7D%20---%20%7B%7B%20msg.split(%22%22).reverse().join(%22%22)%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!--%20%E4%BD%BF%E7%94%A8%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E6%97%B6%EF%BC%8C%E5%92%8Cdata%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F%E4%BF%9D%E6%8C%81%E4%B8%80%E8%87%B4%20--%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%7Bmsg%7D%7D%20---%20%7B%7B%20reverseMsg%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fbody%3E%0A%20%20%20%20%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%20%20%20%20%3Cscript%3E%0A%20%20%20%20%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%22hello%20vue%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E5%9C%A8vue%E5%AE%9E%E4%BE%8B%E7%9A%84computed%E9%80%89%E9%A1%B9%E4%B8%AD%0A%20%20%20%20%20%20%20%20%20%20%20%20computed%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E4%B8%80%E8%88%AC%E7%9A%84%E4%B9%A6%E5%86%99%E5%BD%A2%E5%BC%8F%E4%B8%BA%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%EF%BC%8C%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E5%80%BC%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20reverseMsg()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20this.msg.split(%22%22).reverse().join(%22%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%3C%2Fscript%3E%0A%20%20%20%20%60%60%60%0A%0A2.%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%20VS%20%E6%96%B9%E6%B3%95%0A%20%20%20%20-%20%E5%90%8C%E7%AD%89%E6%9D%A1%E4%BB%B6%E4%B8%8B%EF%BC%8C%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E5%85%B7%E6%9C%89%E4%BE%9D%E8%B5%96%E6%80%A7%EF%BC%8C%E8%A6%81%E4%BC%98%E4%BA%8E%E6%96%B9%E6%B3%95%0A%20%20%20%20-%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E5%8F%AA%E6%9C%89%E5%9C%A8%E5%8E%9F%E5%A7%8B%E6%95%B0%E6%8D%AE%E5%8F%91%E7%94%9F%E6%94%B9%E5%8F%98%E6%97%B6%E6%89%8D%E4%BC%9A%E9%87%8D%E6%96%B0%E6%89%A7%E8%A1%8C%0A%20%20%20%20-%20%E6%96%B9%E6%B3%95%E4%BC%9A%E5%9C%A8%E6%AF%8F%E6%AC%A1%E4%BD%BF%E7%94%A8%E6%97%B6%E9%83%BD%E4%BC%9A%E9%87%8D%E6%96%B0%E6%89%A7%E8%A1%8C%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Cbody%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%7Bmsg%7D%7D%20---%20%7B%7B%20reverseMsgFn()%20%7D%7D%20---%20%7B%7B%20reverseMsgFn()%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%7Bmsg%7D%7D%20---%20%7B%7B%20reverseMsg%20%7D%7D%20---%20%7B%7B%20reverseMsg%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fbody%3E%0A%20%20%20%20%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%20%20%20%20%3Cscript%3E%0A%20%20%20%20%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%22hello%20vue%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20computed%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20reverseMsg()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log(%22computed%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20this.msg.split(%22%22).reverse().join(%22%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20reverseMsgFn()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log(%22methods%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20this.msg.split(%22%22).reverse().join(%22%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%3C%2Fscript%3E%0A%20%20%20%20%60%60%60%0A%20%20%20%20!%5B583937f3bcbe95fed15439bae85815b0.png%5D(evernotecid%3A%2F%2FBB210BE9-3A02-4842-A4C9-7970C5C1E576%2Fappyinxiangcom%2F16639017%2FENResource%2Fp716)%0A%20%20%20%20%0A%20%20%20%20%0A3.%20%E4%BE%A6%E5%90%AC%E5%99%A8%0A%20%20%20%20-%20%E5%BD%93%E6%95%B0%E6%8D%AE%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96%EF%BC%8C%E6%89%A7%E8%A1%8C%E5%BC%82%E6%AD%A5%E6%88%96%E5%BC%80%E9%94%80%E8%BE%83%E5%A4%A7%E7%9A%84%E6%93%8D%E4%BD%9C%E6%97%B6%EF%BC%8C%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%E4%BE%A6%E5%90%AC%E5%99%A8%0A%20%20%20%20-%20%E4%BE%A6%E5%90%AC%E5%99%A8%E4%BC%9A%E5%9C%A8%E4%BE%A6%E5%90%AC%E6%95%B0%E6%8D%AE%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96%E6%97%B6%E6%89%A7%E8%A1%8C%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Cbody%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22text%22%20v-model%3D%22firstName%22%3E%20%2B%20%3Cinput%20type%3D%22text%22%20v-model%3D%22lastName%22%3E%20%3D%20%7B%7BfullName%7D%7D%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fbody%3E%0A%20%20%20%20%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%20%20%20%20%3Cscript%3E%0A%20%20%20%20%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20firstName%3A%22%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20lastName%3A%22%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fullName%3A%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20watch%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20firstName(%20newVal%2C%20oldVal%20)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.fullName%20%3D%20newVal%20%2B%20this.lastName%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20lastName(%20newVal%2C%20oldVal%20)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.fullName%20%3D%20this.firstName%20%2B%20newVal%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%3C%2Fscript%3E%0A%20%20%20%20%60%60%60%0A%0A4.%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%20PK%20%E4%BE%A6%E5%90%AC%E5%99%A8%0A%20%20%20%20-%20%E5%90%8C%E7%AD%89%E6%9D%A1%E4%BB%B6%E4%B8%8B%EF%BC%8C%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E4%BC%98%E4%BA%8E%E4%BE%A6%E5%90%AC%E5%99%A8%0A%20%20%20%20-%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E5%8F%AF%E4%BB%A5%E6%9B%B4%E6%96%B9%E4%BE%BF%E7%9A%84%E8%A7%A3%E5%86%B3%E6%9F%90%E4%BA%9B%E9%97%AE%E9%A2%98%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Cbody%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22text%22%20v-model%3D%22firstName%22%3E%20%2B%20%3Cinput%20type%3D%22text%22%20v-model%3D%22lastName%22%3E%20%3D%20%7B%7BfullName%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22text%22%20v-model%3D%22firstName2%22%3E%20%2B%20%3Cinput%20type%3D%22text%22%20v-model%3D%22lastName2%22%3E%20%3D%20%7B%7BfullName2%7D%7D%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fbody%3E%0A%20%20%20%20%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%20%20%20%20%3Cscript%3E%0A%20%20%20%20%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20firstName%3A%22%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20lastName%3A%22%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fullName%3A%22%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20firstName2%3A%22%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20lastName2%3A%22%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20watch%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20firstName(%20newVal%2C%20oldVal%20)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.fullName%20%3D%20newVal%20%2B%20this.lastName%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20lastName(%20newVal%2C%20oldVal%20)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.fullName%20%3D%20this.firstName%20%2B%20newVal%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20computed%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20fullName2()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20this.firstName2%20%2B%20this.lastName2%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%3C%2Fscript%3E%0A%20%20%20%20%60%60%60%0A%0A5.%20%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84setter%0A%0A%0A%23%20%E4%B8%89%E3%80%81%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%20-%20%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%0A-%20%E6%AF%8F%E4%B8%AA%20Vue%20%E5%AE%9E%E4%BE%8B%E5%9C%A8%E8%A2%AB%E5%88%9B%E5%BB%BA%E6%97%B6%E9%83%BD%E8%A6%81%E7%BB%8F%E8%BF%87%E4%B8%80%E7%B3%BB%E5%88%97%E7%9A%84%E5%88%9D%E5%A7%8B%E5%8C%96%E8%BF%87%E7%A8%8B%EF%BC%8C%E8%BF%99%E4%B8%AA%E8%BF%87%E7%A8%8B%E4%B8%AD%E4%BC%9A%E8%BF%90%E8%A1%8C%E4%B8%80%E4%BA%9B%E5%8F%AB%E5%81%9A%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90%E7%9A%84%E5%87%BD%E6%95%B0%EF%BC%8C%E8%AE%A9%E7%94%A8%E6%88%B7%E5%8F%AF%E4%BB%A5%E5%9C%A8%E4%B8%8D%E5%90%8C%E9%98%B6%E6%AE%B5%E6%B7%BB%E5%8A%A0%E8%87%AA%E5%B7%B1%E7%9A%84%E4%BB%A3%E7%A0%81%E3%80%82%0A-%20%E4%B8%8B%E5%9B%BE%E5%B1%95%E7%A4%BA%E4%BA%86%E5%AE%9E%E4%BE%8B%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E3%80%82%E4%BD%A0%E4%B8%8D%E9%9C%80%E8%A6%81%E7%AB%8B%E9%A9%AC%E5%BC%84%E6%98%8E%E7%99%BD%E6%89%80%E6%9C%89%E7%9A%84%E4%B8%9C%E8%A5%BF%EF%BC%8C%E4%B8%8D%E8%BF%87%E9%9A%8F%E7%9D%80%E4%BD%A0%E7%9A%84%E4%B8%8D%E6%96%AD%E5%AD%A6%E4%B9%A0%E5%92%8C%E4%BD%BF%E7%94%A8%EF%BC%8C%E5%AE%83%E7%9A%84%E5%8F%82%E8%80%83%E4%BB%B7%E5%80%BC%E4%BC%9A%E8%B6%8A%E6%9D%A5%E8%B6%8A%E9%AB%98%E3%80%82%0A!%5B6f2c97f045ba988851b02056c01c8d62.png%5D(evernotecid%3A%2F%2FBB210BE9-3A02-4842-A4C9-7970C5C1E576%2Fappyinxiangcom%2F16639017%2FENResource%2Fp717)%0A%0A1.%20%E5%A3%B0%E6%98%8E%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%E7%9A%84%E5%88%86%E7%B1%BB%0A%20%20%20%20%60%60%60js%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20beforeCreate()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F*%E5%A4%87%E5%AD%95*%2F%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log(%22%E5%AE%9E%E4%BE%8B%E5%88%9B%E5%BB%BA%E4%B9%8B%E5%89%8D%22)%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20created()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F*%E6%80%80%E4%B8%8A%E4%BA%86*%2F%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%95%B0%E6%8D%AE%E8%AF%B7%E6%B1%82%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log(%22%E5%AE%9E%E4%BE%8B%E5%88%9B%E5%BB%BA%E4%B9%8B%E5%90%8E%22)%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20beforeMount()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F*%E5%BF%AB%E7%94%9F%E4%BA%86*%2F%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log(%22%E6%8C%82%E8%BD%BD%E5%88%B0%E9%A1%B5%E9%9D%A2%E4%B9%8B%E5%89%8D%22)%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20mounted()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F*%E7%94%9F%E4%BA%86*%2F%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%95%B0%E6%8D%AE%E8%AF%B7%E6%B1%82%EF%BC%8CDOM%E6%93%8D%E4%BD%9C%EF%BC%8C%E7%9B%91%E5%90%AC%E6%BB%9A%E5%8A%A8%E4%BA%8B%E4%BB%B6...%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log(%22%E6%8C%82%E8%BD%BD%E5%88%B0%E9%A1%B5%E9%9D%A2%E4%B9%8B%E5%90%8E%22)%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20beforeUpdate()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F*%E5%BF%AB%E9%95%BF%E5%A4%A7%E4%BA%86*%2F%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log(%22%E6%95%B0%E6%8D%AE%E6%9B%B4%E6%96%B0%E4%B9%8B%E5%89%8D%22)%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20updated()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F*%E9%95%BF%E5%A4%A7%E4%BA%86*%2F%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20DOM%E6%93%8D%E4%BD%9C%EF%BC%8C%E5%AE%9E%E4%BE%8B%E5%8C%96%E7%9A%84%E6%93%8D%E4%BD%9C...%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log(%22%E6%95%B0%E6%8D%AE%E6%9B%B4%E6%96%B0%E4%B9%8B%E5%90%8E%22)%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20beforeDestroy()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F*%E8%A6%81%E6%8C%82%E4%BA%86*%2F%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%8F%96%E6%B6%88%E6%95%B0%E6%8D%AE%E8%AE%A2%E9%98%85%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log(%22%E5%AE%9E%E4%BE%8B%E9%94%80%E6%AF%81%E4%B9%8B%E5%89%8D%22)%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20destroyed()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F*%E6%8C%82%E4%BA%86*%2F%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log(%22%E5%AE%9E%E4%BE%8B%E9%94%80%E6%AF%81%E4%B9%8B%E5%90%8E%22)%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%20%20%20%20%60%60%60%0A%0A%23%20%E5%9B%9B%E3%80%81%E6%95%B0%E6%8D%AE%E8%AF%B7%E6%B1%82%0A1.%20%5Bfetch%5D(https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FFetch_API%2FUsing_Fetch)%0A%20%20%20%20-%20fetch%E6%98%AF%E4%B8%80%E7%A7%8DHTTP%E6%95%B0%E6%8D%AE%E8%AF%B7%E6%B1%82%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%8C%E6%98%AFXMLHttpRequest%E7%9A%84%E4%B8%80%E7%A7%8D%E6%9B%BF%E4%BB%A3%E6%96%B9%E6%A1%88%E3%80%82%0A%20%20%20%20-%20fetch%E4%B8%8D%E6%98%AFajax%E7%9A%84%E8%BF%9B%E4%B8%80%E6%AD%A5%E5%B0%81%E8%A3%85%EF%BC%8C%E8%80%8C%E6%98%AF%E5%8E%9F%E7%94%9Fjs%E3%80%82Fetch%E5%87%BD%E6%95%B0%E5%B0%B1%E6%98%AF%E5%8E%9F%E7%94%9Fjs%EF%BC%8C%E6%B2%A1%E6%9C%89%E4%BD%BF%E7%94%A8XMLHttpRequest%E5%AF%B9%E8%B1%A1%E3%80%82%0A%20%20%20%20-%20fetch%E4%BC%9A%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AAPromise%E5%AF%B9%E8%B1%A1%EF%BC%8C%E8%BF%99%E4%B8%AAPromise%E5%AF%B9%E8%B1%A1%E5%8F%AA%E6%98%AF%E4%B8%80%E4%B8%AAHTTP%E7%9A%84%E5%93%8D%E5%BA%94%EF%BC%8C%E5%B9%B6%E4%B8%8D%E6%98%AF%E4%B8%80%E4%B8%AAJSON%0A%20%20%20%20-%20%E5%A6%82%E6%9E%9C%E8%A6%81%E8%BF%9B%E8%A1%8C%E4%B8%80%E4%B8%AAjson%E8%AF%B7%E6%B1%82%EF%BC%8C%E6%88%91%E4%BB%AC%E9%9C%80%E8%A6%81%E5%80%9F%E5%8A%A9json%E6%96%B9%E6%B3%95%EF%BC%8C%E6%89%8B%E5%8A%A8%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AAjson%EF%BC%8C%E6%89%8D%E8%83%BD%E8%BF%9B%E8%A1%8C%E4%B8%8B%E4%B8%80%E6%AD%A5%E5%A4%84%E7%90%86%0A%20%20%20%20%60%60%60js%0A%20%20%20%20let%20url%20%3D%20%22http%3A%2F%2Flocalhost%3A3000%2Fpro%22%3B%0A%20%20%20%20fetch(url).then(function(res)%20%7B%0A%20%20%20%20%20%20%20%20return%20response.json()%3B%0A%20%20%20%20%7D).then(function(data)%20%7B%0A%20%20%20%20%20%20%20%20console.log(data)%3B%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%60%60%60%0A%0A2.%20axios%0A%20%20%20%20-%20%5BAxios%5D(http%3A%2F%2Fwww.axios-js.com%2F)%20%E6%98%AF%E4%B8%80%E4%B8%AA%E5%9F%BA%E4%BA%8E%20promise%20%E7%9A%84%20HTTP%20%E5%BA%93%EF%BC%8C%E5%8F%AF%E4%BB%A5%E7%94%A8%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E5%92%8C%20node.js%20%E4%B8%AD%E3%80%82%0A%20%20%20%20-%20%E9%9C%80%E8%A6%81%E5%BC%95%E5%85%A5%E7%AC%AC%E4%B8%89%E6%96%B9%E6%96%87%E4%BB%B6%20axios.js%20%0A%20%20%20%20%20%20%20%20-%20%60%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2Faxios%2Fdist%2Faxios.min.js%22%3E%3C%2Fscript%3E%0A%20%20%20%20%60%0A%20%20%20%20-%20%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F%E7%B1%BB%E4%BC%BC%E4%BA%8EjQuery%E7%9A%84ajax%0A%20%20%20%20%20%20%20%20-%20%5Baxios%E4%BD%BF%E7%94%A8%E6%96%87%E6%A1%A3%5D(http%3A%2F%2Fwww.axios-js.com%2Fzh-cn%2Fdocs%2F)%20%0A%20%20%20%20%20%20%20%20%60%60%60js%0A%20%20%20%20%20%20%20%20let%20url%20%3D%20%22http%3A%2F%2Flocalhost%3A3000%2Fpro%22%3B%0A%20%20%20%20%20%20%20%20axios.get(url).then(function%20(res)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log(res)%3B%0A%20%20%20%20%20%20%20%20%7D).catch(function%20(err)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log(err)%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%60%60%60%0A%0A%0A%23%20%E4%BA%94%E3%80%81%E4%BD%9C%E4%B8%9A%0A1.%20TodoList%E7%9A%84%E5%AE%9E%E7%8E%B0%EF%BC%9A%E5%A2%9E%E5%88%A0%E6%94%B9%E6%9F%A5</center></body></html>